'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { GitInfo } from '@/types/git-info';
import gitInfo from '@/data/git-info.json';

interface SidebarProps {
  username?: string;
  isOpen: boolean;
  onToggle: () => void;
  darkMode?: boolean;
}

export default function Sidebar({ username = '用户', isOpen, onToggle }: SidebarProps) {
  const [darkMode, setDarkMode] = useState(false);

  // 初始化并监听主题变化
  useEffect(() => {
    // 检查当前主题状态
    const checkTheme = () => {
      const isDark = document.documentElement.classList.contains('dark');
      setDarkMode(isDark);
    };

    // 初始检查
    checkTheme();

    // 监听主题变化事件
    const handleThemeChange = () => {
      checkTheme();
    };

    window.addEventListener('themeChange', handleThemeChange);

    // 使用 MutationObserver 监听 HTML 类变化
    const observer = new MutationObserver(() => {
      checkTheme();
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });

    return () => {
      window.removeEventListener('themeChange', handleThemeChange);
      observer.disconnect();
    };
  }, []);

  // 处理点击外部关闭侧边栏（只在移动端视图下）
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      // 只在移动端视图且侧边栏打开时处理
      const sidebar = document.getElementById('mobile-sidebar');
      if (window.innerWidth < 768 && isOpen && sidebar && !sidebar.contains(event.target as Node)) {
        onToggle();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    
    // 当侧边栏打开时，禁用body滚动
    if (isOpen && window.innerWidth < 768) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.body.style.overflow = '';
    };
  }, [isOpen, onToggle]);
  
  return (
    <>
      {/* 侧边栏背景遮罩 - 完全重写实现方式 */}
      <div 
        className={`md:hidden fixed inset-0 bg-black transition-opacity duration-300 ease-in-out ${
          isOpen ? 'opacity-5' : 'opacity-0 pointer-events-none'
        } z-20`}
        aria-hidden="true"
        onClick={onToggle}
      />
      
      {/* 侧边栏 - 响应式设计 */}
      <aside 
        id="mobile-sidebar"
        className={`w-[280px] md:w-64 border-r border-gray-100 dark:border-gray-800 h-full fixed left-0 top-0 bg-white dark:bg-black z-30 transition-transform duration-300 ease-in-out ${
          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
        } overflow-auto shadow-lg md:shadow-none`}
      >
        <div className="flex flex-col h-full">
          {/* 顶部Logo */}
          <div className="px-4 py-4 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
            <h1 className="text-lg font-medium text-black dark:text-white">VIP视频解析</h1>
            <div className="flex items-center gap-2">
              {/* Gitee仓库链接 */}
              <a 
                href="https://gitee.com/mingjianyeying/vip" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-gray-600 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                title="查看源代码"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" className="w-5 h-5">
                  <path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.267-25.267z"/>
                </svg>
              </a>
              {/* 移动端关闭按钮 */}
              <button 
                className="md:hidden text-gray-600 dark:text-gray-400"
                onClick={onToggle}
                aria-label="关闭菜单"
              >
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
          
          {/* 用户信息 */}
          <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center">
            <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center mr-2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-600 dark:text-gray-300">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
              </svg>
            </div>
            <div className="flex-1 truncate">
              <p className="text-sm font-medium truncate text-black dark:text-white">{username}</p>
            </div>
            <Link href="/settings" className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
              </svg>
            </Link>
          </div>
          
          {/* 导航菜单 */}
          <nav className="flex-1 px-3 py-4 overflow-y-auto">
            <ul className="space-y-1">
              <li>
                <Link 
                  href="/"
                  className="flex items-center px-2 py-2 text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
                  onClick={() => window.innerWidth < 768 && onToggle()}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                  </svg>
                  首页
                </Link>
              </li>
              <li>
                <Link 
                  href="/history"
                  className="flex items-center px-2 py-2 text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
                  onClick={() => window.innerWidth < 768 && onToggle()}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                  </svg>
                  历史记录
                </Link>
              </li>
              <li>
                <Link 
                  href="/favorite"
                  className="flex items-center px-2 py-2 text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
                  onClick={() => window.innerWidth < 768 && onToggle()}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.563.563 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                  </svg>
                  我的收藏
                </Link>
              </li>
              <li>
                <Link 
                  href="/categories"
                  className="flex items-center px-2 py-2 text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
                  onClick={() => window.innerWidth < 768 && onToggle()}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
                  </svg>
                  视频分类
                </Link>
              </li>
              <li>
                <Link 
                  href="/settings"
                  className="flex items-center px-2 py-2 text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
                  onClick={() => window.innerWidth < 768 && onToggle()}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                  </svg>
                  设置
                </Link>
              </li>
              <li>
                <Link 
                  href="/about"
                  className="flex items-center px-2 py-2 text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
                  onClick={() => window.innerWidth < 768 && onToggle()}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                  </svg>
                  关于
                </Link>
              </li>
            </ul>
          </nav>
          
          {/* 底部版本信息 */}
          <div className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-100 dark:border-gray-800">
            <p>版本 {gitInfo.version}</p>
          </div>
        </div>
      </aside>
    </>
  );
}